<div ng-controller="StatsViewer" ng-cloak>

  <div ng-if="stats.numVisits > 0">
    <h4>Exploration Completion Rate</h4>
    <bar-chart chart-data="chartData" chart-colors="chartColors" width="500" height="100" chart-area-width=300></bar-chart>

    <br>

    <h4>Common learner paths </h4>
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div state-graph-viz val="graphData" node-fill="darkseagreen" opacity-map="statsGraphOpacities" highlight-states="highlightStates" state-stats="stats.stateStats" on-click-function="onClickStateInStatsGraph">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="stats.numVisits == 0">
    <em>
      This exploration has not been viewed by anyone yet, so there are no
      statistics to display.
    </em>
  </div>

  <script type="text/ng-template" id="modals/stateStats">
    <div class="modal-header">
      <h3>Statistics for <[stateName]></h3>
    </div>

    <div class="modal-body">
      <div ng-if="improvementType == 'May be confusing'">
        <span class="glyphicon glyphicon-warning-sign"></span>
        <em>
          This state may be confusing. Learners often leave the exploration when encountering it.
        </em>
      </div>

      <div ng-if="improvementType == 'Needs more feedback'">
        <span class="glyphicon glyphicon-warning-sign"></span>
        <em>
          This state may need more feedback. Learners often return to it after giving an answer.
        </em>
      </div>

      <p>
        <strong>Times hit</strong>: <[stateStats.totalEntryCount]>
      </p>

      <div ng-if="stateStats.totalEntryCount">
        <h5>Answers</h5>
        <div ng-show="doesAnswerExist()">
          <ul>
            <li ng-repeat="(rule, ruleData) in rulesStats" ng-show="ruleData.answers.length > 0">
              <[getHumanReadableRuleName(rule)]>
              <ul>
                <li ng-repeat="answerData in ruleData.answers track by $index">
                  <span class="label label-info pull-right">
                    <[getNumTimesString(answerData[1])]>
                  </span>
                  <pre><[answerData[0]]></pre>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div ng-if="!doesAnswerExist()">
          <em>No one has given any answers.</em>
        </div>
      </div>

    </div>

    <div class="modal-footer">
      <button class="btn btn-default" ng-click="cancel()">Close</button>
    </div>
  </script>
</div>
